<template>
	<!-- 打卡表单页面 -->
	<view>
		<view v-for="(formItem, formIndex) in formList" :key="formIndex"
			class="u-m-t-20 u-p-t-30 u-p-l-50 u-p-r-50 u-p-b-20" style="background-color: #FFFFFF;">
			<view class="u-font-xl"> {{ formItem.title }} </view>
			<u-line color="#d4d4d4" class="u-m-t-20" />
			<u-form v-for="(item,index) in formItem.items" :key="index" class="u-p-l-5" label-position="top">
				<u-form-item :label="item.label" :prop="item.prop" :required="item.isrequested">

					<!-- 如果当前值等于默认值 -->
					<view v-show="item.valid" class="warn">必填</view>
					<!-- if input -->
					<u-input v-if="item.Itype==='input'" :type="item.type" input-align="center"
						:placeholder="item.placeholder" v-model="item.data" :border='true' border-color="#afb0b3" />

					<!-- if radio -->
					<u-radio-group v-else-if="item.Itype==='radio-group'" v-model="item.data">
						<u-radio v-for="(rItem, rIndex) in item.rItems" :key="rIndex" :name="rItem.name"
							:disabled="rItem.disabled">
							{{ rItem.name }}
						</u-radio>
					</u-radio-group>

					<!-- if button -->
					<u-button v-else-if="item.Itype==='get_position_button'" :custom-style="{width: '100%'}"
						@click="get_position(item)">
						{{ item.data }}
					</u-button>

					<!-- if time button -->
					<u-button v-else-if="item.Itype==='set_time_button'" :custom-style="{width: '100%'}"
						@click="time_picker_show = true">
						{{ item.data }}
					</u-button>

					<u-picker mode="time" v-if="item.Itype==='set_time_button'" v-model="time_picker_show"
						:params="item.time_params" @confirm="(returnTime)=>{set_time(item, returnTime)}" />

				</u-form-item>

			</u-form>

		</view>
		<view class="u-m-t-30">
			<u-button type="primary" @click="submit">提交打卡情况</u-button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		jsonp
	} from 'vue-jsonp'
	export default {
		onLoad() {
			this.$u.api.isClocked().then(res => {
				if (res.data) {
					console.log("今日打了卡了")
					uni.redirectTo({
						url: "/pages/clock_statistics/sub_sub_page?stu_id=" + this.$store.state.userInfo
							.name
					})
				}
			}).catch(err => {
				console.log(err)
			})

			// console.log('store.lastClockDate', )
		},
		mounted() {
			this.$u.api.getRecentPartInfo().then(res => {
				console.log('近期内容', res)
				this.formList[1].items[1].data = res.data.clockVaccineDose
				this.formList[1].items[0].data = this.$time_formatter.just_keep_date(res.data.clockVaccineTime)
				this.formList[1].items[2].data = res.data.clockIsIntimate ? "是" : "否"
				this.formList[1].items[3].data = res.data.clockTel
			}).catch(err => {
				console.log(err)
			})
		},
		data() {
			return {
				time_picker_show: false,
				formList: [{
						title: '今日表单',
						items: [{
								label: "今日体温",
								prop: "clockTemp",
								isrequested: true,
								Itype: 'input',
								type: 'number',
								placeholder: '请输入请输入当前温度',
								data: '',
								valid: false,
								default: '',

							},
							{
								label: "是否同时具有发烧、咳嗽、呼吸困难三种症状",
								prop: "clockIsAbnormal",
								isrequested: true,
								Itype: 'radio-group',
								rItems: [{
										name: '是',
										disabled: false
									},
									{
										name: '否',
										disabled: false
									}
								],
								data: '否',
								valid: null
							},
							{
								label: "当前位置",
								prop: "clockLocation",
								isrequested: true,
								Itype: 'get_position_button',
								data: '请定位当前地点',
								default: '请定位当前地点',
								valid: false
							},

						]
					},
					{
						title: '近期表单',
						items: [{
								label: "上次新冠疫苗接种时间",
								prop: "clockVaccineTime",
								isrequested: false,
								Itype: 'set_time_button',
								data: '',
								time_params: {
									year: true,
									month: true,
									day: true
								},
								valid: false,
								default: ''
							},
							{
								label: "已接种剂数",
								prop: "clockVaccineDose",
								isrequested: false,
								Itype: 'input',
								type: 'number',
								placeholder: '请输入已接种剂数',
								data: '',
								default: '',
								valid: false
							},
							{
								label: "近两周是否接触过密切接触者",
								prop: "clockIsIntimate",
								isrequested: true,
								Itype: 'radio-group',
								rItems: [{
										name: '是',
										disabled: false
									},
									{
										name: '否',
										disabled: false
									}
								],
								data: '否',
								valid: null
							},
							{
								label: "紧急联系人",
								prop: "clockTel",
								isrequested: true,
								Itype: 'input',
								type: 'number',
								placeholder: '请输入紧急联系人电话',
								data: '',
								valid: false,
								default: ''
							},
						]
					}
				]
			}
		},
		methods: {
			// 选中任一radio时，由radio-group触发
			radioGroupChange1(e) {
				this.data.form1.clock_abnormal.value = e
			},
			// 定位
			get_position(item) {
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					altitude: true,
					success: function(res) {
						uni.hideLoading();


						// $.ajax({
						// 	type: "get", //jquey是不支持post方式跨域的 
						// 	async: false,
						// 	url: "http://api.map.baidu.com/reverse_geocoding/v3/?ak=DDgMRRvbCrE9I4VeqWLpEzsee1vmVenE&output=json&coordtype=wgs84ll&location=" +res.latitude + "," + res.longitude ,
						// 	dataType: "jsonp",
						// 	jsonp: "callback",
						// 	//成功获取跨域服务器上的json数据后,会动态执行这个callback函数  
						// 	success: function(data) {
						// 		console.log('res',data)
						// 	}
						// });


						// uni.request({
						// 	type: "GET",
						// 	// dataType: "jsonp",
						// 	// jsonp: "callback",
						// 	url: "http://api.map.baidu.com/reverse_geocoding/v3/?ak=DDgMRRvbCrE9I4VeqWLpEzsee1vmVenE&output=json&coordtype=wgs84ll&location=" +
						// 		res.latitude + "," + res.longitude,
						// 	success: function(ress) {
						// 		console.log(ress.data)
						// 		// JSON.parse(ress.data)
						// 		let addrezz = ress.data.result.addressComponent
						// 		item.data = addrezz.province + '-' + addrezz.city + '-' + addrezz
						// 			.district
						// 	},
						// 	fail: function(info) {
						// 		that.$refs.uToast.show({
						// 			title: '定位失败'
						// 		})
						// 	}
						// })
						let url =
							"http://api.map.baidu.com/reverse_geocoding/v3/?ak=DDgMRRvbCrE9I4VeqWLpEzsee1vmVenE&output=json&coordtype=wgs84ll&location=" +
							res.latitude + "," + res.longitude
						jsonp(url).then(res => {
							console.log('res', res)
							item.data = res.result.formatted_address
						})

					},
					fail: function(info) {
						uni.hideLoading();
						//失败回调
						// 定位权限未开启，引导设置
						that.$refs.uToast.show({
							title: '您已拒绝定位,请开启'
						})
					}
				});

			},
			// 获取时间
			returnTime(e) {
				return e.year + '-' + e.month + '-' + e.day
			},
			set_time(item, e) {
				item.data = this.returnTime(e)
			},
			// 提交
			submit() {
				let that = this
				let tmplist = {}
				// 加载
				
				// 合法性断言
				let flag = false
				
				that.formList.forEach((v, i) => {
					v.items.forEach((v2, i2) => {
						if (v2.valid !== null && v2.data === v2.default) {
							flag = true
							v2.valid = true
						} else {
							v2.valid = false
						}

						if (v2.data == '是' || v2.data == '否') {
							tmplist[v2.prop] = v2.data == '是'
						} else {
							tmplist[v2.prop] = v2.data
						}


					}, this)
				}, this);

				console.log('表单信息', tmplist)

				// WARNING: TODO:缺少基本的数据校验和反馈
				if (flag) {
					console.log('非法')
					that.$refs.uToast.show({
						title: '表单非法'
					});
					return
				}
				
				uni.showLoading({
					title: '正在提交表单',
					mask: true
				})
				this.$u.api.submitClock(tmplist).then(res => {
					uni.hideLoading();
					console.log(res)
					if (res.code === 0) {
						// 成功
						that.$refs.uToast.show({
							title: '提交成功',
							type: 'success',
							back: true
						});

						// 回到主页
						uni.redirectTo({
						    url: '/pages/index/index'
						});

					}else {
						uni.hideLoading();
						that.$refs.uToast.show({
							title: '提交失败，请重试',
							type: 'error'
						})
					}
				}).catch(err => {
					console.log('打卡失败', err)
					that.$refs.uToast.show({
						title: '提交失败，请重试',
						type: 'error',
					})
				})
				// 结束加载

			}
		}
	};
</script>

<style scoped>
	.warn {
		color: red;
		width: 70rpx;
		font-weight: 700;
	}
</style>
